<template>
    <div class="form-group FormRangeDataPicker">
        <label :class="labelClass" :style="finalLabelStype"><span v-if="required" class="required ">*</span>{{ title }}：</label>
        <div :class="rightClass" :style="rightStyle" style="display: flex;">
            <form-pop :content="error" />

            <a-select :value="selectValue" :style="rightStyle" @change="changeItem" :size="size" class="picker-select">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="今日">今日</a-select-option>
                <a-select-option value="昨日">昨日</a-select-option>
                <a-select-option value="本周">本周</a-select-option>
                <a-select-option value="上周">上周</a-select-option>
                <a-select-option value="本月">本月</a-select-option>
                <a-select-option value="上月">上月</a-select-option>
                <a-select-option value="本季度">本季度</a-select-option>
                <a-select-option value="上季度">上季度</a-select-option>
                <a-select-option value="自定义">自定义</a-select-option>
            </a-select>
            <a-range-picker v-show="selectValue == '自定义'" :title="rangDateValue" :value="rangDateValue || null" :showTime="showTime" :format="format" :placeholder="placeholder" @change="onChange" :size="size">
            </a-range-picker>
        </div>
    </div>
</template>

<script>
import formAttr from "@/mixins/form/form-attr";
// import moment from "moment";
import getDate from "@/utils/tool/date";

const defaultLabelStype =
    "font-weight: normal;justify-content: flex-end;padding-left: 5px;text-align: right;width:110px;";
export default {
    name: "FormRangDatePicker",
    mixins: [formAttr],
    props: {
        placeholder: {
            type: Array,
            default: () => []
        },
        format: {
            type: String,
            default: "YYYY-MM-DD HH:mm:ss"
        },
        showTime: {
            type: [Object, Boolean],
            default: false
        },

    },
    data () {
        return {
            localSelectValue: ""
        }
    },

    computed: {
        selectValue: function () {
            const { value } = this;
            if (!value) return "";
            if (value.length > 0) {
                return value[0] || "";
            }
            return "";
        },
        rangDateValue: function () {
            const { value } = this;
            if (!value) return null;
            if (value.length > 1) {
                return value[1] || null;
            }
            return null;
        },
        finalLabelStype: function () {
            return this.labelStyle || defaultLabelStype;
        },
    },
    methods: {
        onChange (date, dateString) {
            console.log("日期范围：date", date, "dateString", dateString);
            this.$emit("input", [this.localSelectValue, dateString]);
        },
        changeItem (value) {
            let { format } = this;
            let beginDate, endDate;
            this.localSelectValue = value;
            switch (value) {
                case "今日":
                    beginDate = getDate.getToday(format).starttime;
                    endDate = getDate.getToday(format).endtime;
                    this.onChange([], [beginDate, endDate]); break;
                case "昨日":
                    beginDate = getDate.getYesterday(format).starttime;
                    endDate = getDate.getYesterday(format).endtime;
                    this.onChange([], [beginDate, endDate]); break;
                case "本周":
                    beginDate = getDate.getCurrWeekDays(format).starttime;
                    endDate = getDate.getCurrWeekDays(format).endtime;
                    this.onChange([], [beginDate, endDate]); break;
                case "上周":
                    beginDate = getDate.getLastWeekDays(format).starttime;
                    endDate = getDate.getLastWeekDays(format).endtime;
                    this.onChange([], [beginDate, endDate]); break;
                case "本月":
                    beginDate = getDate.getCurrMonthDays(format).starttime;
                    endDate = getDate.getCurrMonthDays(format).endtime;
                    this.onChange([], [beginDate, endDate]); break;
                case "上月":
                    beginDate = getDate.getLastMonthDays(format).starttime;
                    endDate = getDate.getLastMonthDays(format).endtime;
                    this.onChange([], [beginDate, endDate]); break;
                case "本季度":
                    beginDate = getDate.getCurrQuarter(format).starttime;
                    endDate = getDate.getCurrQuarter(format).endtime;
                    this.onChange([], [beginDate, endDate]); break;
                case "上季度":
                    beginDate = getDate.getLastQuarter(format).starttime;
                    endDate = getDate.getLastQuarter(format).endtime;
                    this.onChange([], [beginDate, endDate]); break;
                case "自定义":
                    beginDate = "";
                    endDate = "";
                    this.onChange([], [beginDate, endDate]); break;
                default:
                    beginDate = "";
                    endDate = "";
                    this.onChange([], [beginDate, endDate]); break;
            }
        },

    },
    watch: {
        value: function (n, o) {
            console.log("监听事件范围", n, o, n == o);
        }
    }
};
</script>
<style lang="less" >
    // .FormRangeDataPicker{
    //   .ant-calendar-picker{
    //     min-width: 80% !important;
    //   }
    // }
    .picker-select {
        .ant-select-selection--single {
            height: 28px !important;
        }
    }
</style>
